<template>
  <div class="container">
    <div class="search-box">
      <input type="text" v-model="inp" />
      <button @click="checked"><i class="el-icon-search"></i>搜索</button>
    </div>
    <div class="box">
      <GoodsRow v-for="item in goods.records" :key="item._id" :item="item" @del="del"></GoodsRow>
    </div>
    <ul class="pagination">
      <li @click="pre">&lt;</li>
      <li v-for="value in goods.display" :key="value" @click="select">{{ value }}</li>
      <li @click="next">&gt;</li>
    </ul>
  </div>
</template>

<script>
import GoodsRow from '@/components/base/goodsrow.vue'
import { pagegoods, delGoods } from '../../api'
export default {
  components: {
    GoodsRow
  },
  data() {
    return {
      goods: {},
      page: 1,
      search: '',
      inp: ''
    }
  },
  created() {
    this.getGoods({ search: this.search, page: 1 })
  },
  methods: {
    async getGoods(params) {
      const { data } = await pagegoods('/api/back/pagegoods', params)
      this.goods = data
    },
    pre() {
      if (this.page !== 1) {
        this.page -= 1
        this.getGoods({ search: this.search, page: this.page })
      }
    },
    next() {
      if (this.page !== this.goods.pages) {
        this.page += 1
        this.getGoods({ search: this.search, page: this.page })
      }
    },
    select(e) {
      this.page = Number(e.target.innerText)
      this.getGoods({ search: this.search, page: this.page })
    },
    checked() {
      this.search = this.inp
      this.getGoods({ search: this.search, page: 1 })
    },
    async del(id) {
      const result = await delGoods('/api/back/delgoods', { id })
      if (result.data === 'ok') {
        const { data } = await pagegoods('/api/back/pagegoods', { search: this.search, page: this.page })
        this.goods = data
      }
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
  // background-color: pink;
  background: url('../../assets/image/bg1.jpg') no-repeat;
  background-size: cover;
  // backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .box {
    width: 80%;
    height: 80%;
    // background-color: cyan;
  }
  .search-box {
    display: flex;
    transform: translateX(450px);
    justify-content: center;
    align-items: center;
    font-size: 16px;
    input {
      outline: none;
      border: 1px solid #000;
      width: 150px;
      height: 25px;

      background-color: #fff;
      color: rgba(#000, 0.6);
      border-radius: 3px;
      text-indent: 1em;
      &:focus {
        border: 0.5px solid orange;
      }
    }
    button {
      height: 25px;
      width: 60px;
      outline: none;
      border: none;
      margin-left: 2px;
      background-color: rgba(#27ba9b, 0.7);
      border-radius: 5px;
      color: #fff;
      &:hover {
        background-color: #27ba9b;
      }
    }
  }
  .pagination {
    display: flex;
    li {
      list-style: none;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 5px;
      font-size: 16px;
      color: #fff;
      font-weight: 600;
      opacity: 0.6;
      margin-right: 10px;
      background-color: #000;
      transition: all 0.25 ease-out;
      &:active {
        transform: scale(1.1);
        box-shadow: -8px 8px 10px rgba(#000, 0.7);
        transition: all 0.15 ease-in;
      }
    }
  }
}
</style>
